<template>
    <div class="detail" style="height: 100%;">
      <div class="detail-top">
              <p class="dt-tip">智慧安全用电系统  / 设备详情</p>
              <div class="device-name">
                  <p>设备名称：<span>{{detail.deviceName}}</span></p>
                  <div class="btn" @click="detailReturn">
                    <i class="iconfont icon-return"></i>
                      <span>返回</span>
                  </div>
              </div>
              <div class="device-num">
                  <p class="dn-tip">设备编号：<span>Dev-002021063001</span></p>
                  <div class="dt-status">
                      <p  class="statusColor" :style="statusJudge(detail.status)"></p>
                      <span>{{detail.status}}</span>
                  </div>
              </div>
          </div>
          <div class="detail-banner">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                  <!-- 基本信息部分 -->
                  <el-tab-pane label="基本信息" name="first">
                      <div class="basic-info">
                          <el-header style="height: 35px;">
                              <span>设备信息</span>
                          </el-header>
                          <div class="detail-info">
                              <p>
                                  <span>设备编号：</span>
                                  <span>{{detail.deviceNo}}</span>
                              </p>
                              <p>
                                  <span>设备名称：</span>
                                  <span>{{detail.deviceName}}</span>
                              </p>
                          </div>
                          <div class="detail-info">
                              <p>
                                  <span>设备型号：</span>
                                  <span>-</span>
                              </p>
                              <p>
                                  <span>上报时间：</span>
                                  <span>2022/10/12  11:46:6</span>
                              </p>
                          </div>
                          <div class="detail-info">
                              <p>
                                  <span>设备类型：</span>
                                  <span>{{detail.deviceType}}</span>
                              </p>
                              <p>
                                  <span>所属组织：</span>
                                  <span>{{detail.department}}</span>
                              </p>
                          </div>
                          <div class="detail-info">
                              <p>
                                  <span>责任人：</span>
                                  <span>{{detail.safetyDir}}</span>
                              </p>
                              <p>
                                  <span>电话：</span>
                                  <span>{{detail.dirNum}}</span>
                              </p>
                          </div>
                          <div class="detail-info">
                              <p>
                                  <span>安装点位：</span>
                                  <span>{{detail.installAddr}}</span>
                              </p>
                          </div>
                      </div>
                  </el-tab-pane>
                  <!-- 数据记录部分 -->
                  <el-tab-pane label="数据记录" name="second">
                    <div class="num-top">
                        <el-button 
                        @click="deviceStatus"
                        class="active"
                        >设备状态</el-button>
                        <el-button 
                        @click="deviceParams"
                        >设备参数</el-button>
                        <p>
                            <span>最新上报时间：</span>
                            <span>2022/10/12  11:46:6</span>
                        </p>
                    </div>
                    <!-- 设备状态 -->
                    <div class="device-status" v-show="isShow3">
                        <div class="num-search">
                            <el-date-picker
                                v-model="startTime1"
                                type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                            <el-date-picker
                                v-model="endTime1"
                                type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                          <div class="btnBox">
                            <div class="btn" @click="search1">
                                <i class="iconfont icon-search"></i>
                                <span>查询</span>
                            </div>
                            <div class="btn" @click="addBox" v-has="'add'">
                                <i class="iconfont icon-add"></i>
                                <span>添加</span>
                            </div>
                          </div>
                        </div>
                        <div class="state-diagram">
                            <div id="stateDiagram"></div>
                        </div>
                        <p class="state-tip">状态详情</p>
                        <div class="state-list">
                            <el-table
                        :data="statusTable"
                        style="width: 100%"
                        border>
                            <el-table-column
                                prop="id"
                                label="序号"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="deviceDate"
                                label="时间"
                                width="180">
                                <template slot-scope="scope">
                                    <p>{{timeReturn(scope.row.deviceDate)}}</p>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="status"
                                label="设备状态"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="details"
                                label="详情">
                            </el-table-column>
                        </el-table>
                        </div>
                        <div class="list-bottom">
                            <el-pagination
                            @size-change="currentCount1"
                            @current-change="currentPage1"
                            :current-page="currentPage"
                            :page-sizes="[5]"
                            :page-size="5"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total1"
                            >
                            </el-pagination>
                        </div>
                    </div>
                    <!-- 设备参数 -->
                    <div class="device-params" v-show="isShow4">
                        <div class="num-search">
                            <el-date-picker
                                v-model="startTime1"
                                type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                            <el-date-picker
                                v-model="endTime1"
                                type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                          <div class="btnBox">
                            <div class="btn" @click="search1">
                                <i class="iconfont icon-search"></i>
                                <span>查询</span>
                            </div>
                            <div class="btn"  @click="addSave2" v-has="'add'">
                                <i class="iconfont icon-add"></i>
                                <span>添加</span>
                            </div>
                          </div>
                        </div>
                        <p class="state-tip">参数图</p>
                        <div id="paramsDiagram">
                        </div>
                        <p class="state-tip">参数详情</p>
                        <div class="state-list">
                            <el-table
                        :data="statusTable"
                        style="width: 100%"
                        border>
                            <el-table-column
                                prop="id"
                                label="序号"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="deviceDate"
                                label="时间"
                                width="180">
                                <template slot-scope="scope">
                                    <p>{{timeReturn(scope.row.deviceDate)}}</p>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="paramName"
                                label="参数名称"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="paramValue"
                                label="参数值">
                            </el-table-column>
                        </el-table>
                        </div>
                        <div class="list-bottom">
                            <el-pagination
                            @size-change="currentCount1"
                            @current-change="currentPage1"
                            :current-page="currentPage"
                            :page-sizes="[5]"
                            :page-size="5"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total1"
                            >
                            </el-pagination>
                        </div>
                    </div>
                  </el-tab-pane>
              </el-tabs>
          </div>
          <div class="dispositionBox" v-if="isShow5">
          <el-header style="height: 50px;">
              <span>增加</span>
              <i class="iconfont icon-x" @click="addDisappear"></i>
          </el-header>
          <el-main>
              <div class="inp">
                  <p>
                      <span class="symbol">*</span>
                      <span>设备编号：</span>
                  </p>
                  <el-input v-model="deviceNo" placeholder="请输入内容" :disabled="true">
                  </el-input>
              </div>
              <div class="inp">
                  <p>
                      <span class="symbol">*</span>
                      <span>设备序号：</span>
                  </p>
                  <el-input v-model="add1.id" placeholder="请输入内容">
                  </el-input>
              </div>
              <div class="inp">
                  <p>
                      <span class="symbol">*</span>
                      <span>时间：</span>
                  </p>
                  <el-input v-model="add1.deviceDate" placeholder="请输入内容">
                  </el-input>
              </div>
              <div class="inp">
                  <p>
                      <span class="symbol">*</span>
                      <span>设备状态：</span>
                  </p>
                  <el-select v-model="add1.status" placeholder="请选择">
                      <el-option
                      v-for="item in status1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label">
                      </el-option>
                  </el-select>
              </div>
              <div class="inp">
                  <p>
                      <span class="symbol">*</span>
                      <span>设备详情：</span>
                  </p>
                  <el-select v-model="add1.details" placeholder="请选择">
                      <el-option
                      v-for="item in status1"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value">
                      </el-option>
                  </el-select>
              </div>
              <div class="add-btn">
                  <div class="btn" @click="addDisappear">
                    <i class="iconfont icon-return"></i>
                      <span>取消</span>
                  </div>
                  <div class="btn" @click="addSave">
                    <i class="iconfont icon-save"></i>
                      <span>保存</span>
                  </div>
              </div>
          </el-main>
        </div>



        <!-- 设备参数的增加框 -->
        <div class="dispositionBox" v-if="isShow7">
          <el-header style="height: 50px;">
              <span>增加</span>
              <i class="iconfont icon-x" @click="addDisappear"></i>
          </el-header>
          <el-main>
              <div class="inp">
                  <p>
                      <span class="symbol">*</span>
                      <span>设备编号：</span>
                  </p>
                  <el-input v-model="deviceNo" placeholder="请输入内容" :disabled="true">
                  </el-input>
              </div>
              <div class="inp">
                  <p>
                      <span class="symbol">*</span>
                      <span>设备序号：</span>
                  </p>
                  <el-input v-model="add2.id" placeholder="请输入内容">
                  </el-input>
              </div>
              <div class="inp">
                  <p>
                      <span class="symbol">*</span>
                      <span>时间：</span>
                  </p>
                  <el-input v-model="add2.deviceDate" placeholder="请输入内容">
                  </el-input>
              </div>
              <div class="inp">
                  <p>
                      <span class="symbol">*</span>
                      <span>参数名称：</span>
                  </p>
                  <el-input v-model="add2.paramName" placeholder="请输入内容">
                  </el-input>
              </div>
              <div class="inp">
                  <p>
                      <span class="symbol">*</span>
                      <span>参数值：</span>
                  </p>
                  <el-input v-model="add2.paramValue" placeholder="请输入内容">
                  </el-input>
              </div>
              <div class="add-btn">
                  <div class="btn" @click="addDisappear">
                    <i class="iconfont icon-return"></i>
                      <span>取消</span>
                  </div>
                  <div class="btn" @click="addSave2">
                    <i class="iconfont icon-save"></i>
                      <span>保存</span>
                  </div>
              </div>
          </el-main>
        </div>


        <!-- 遮罩层 -->
      <div class="mask" v-if="isShow6"></div>
    </div>
</template>
  
  <script>
  import * as echarts from 'echarts';
  export default {
    props:[
        "detailNum",
        "fmId",
        "deviceNo"
    ],
    data(){
        return {
            isShow1:true,
            isShow2:false,
            isShow3:true,
            isShow4:false,
            isShow5:false,
            isShow6:false,
            isShow7:false,
            activeName: 'first',
            currentPage:1,
            total1:1,
            page1:1,
            count1:3,
            value:'',
            value1:'',
            options: [
                {value: '选项1',label: '黄金糕'}
            ],
            statusTable: [],
            data1: [],
            data2: [],
          detail:{},
          bc:'',
          bcNormal:'background:#1afa29',
          bcAlarm:'background:red',
          bcFault:'background:#ea9518',
          bcDisable:'background:#88147f',
          bcDelay:'background:#f4c988',
          bcOffline:'background:#bfbfbf',
          add1:{
                "details": "",
                "deviceDate": "",
                "deviceNo": this.deviceNo,
                "id": 0,
                "status": ""
            },
          add2:{
                "deviceDate": "",
                "deviceNo":this.deviceNo,
                "id": 0,
                "paramName": "",
                "paramValue": 0
            },
            status1: [
                {value: '0',label: '离线'},
                {value: '1',label: '正常'}
            ],
            startTime1:'',
            endTime1:'',
        }
    },
    mounted:function(){
        this.render();
        this.dataRender();
    },
    methods:{
        handleClick(tab, event) {
            if(tab.index==1){
                this.chart(this.data1,this.data2);
            }
        },
        currentCount1(val) {
            console.log(`每页 ${val} 条`);
            this.count1=val;
            this.dataRender();
        },
        currentPage1(val) {
            console.log(`当前页: ${val}`);
            this.page1=val;
            this.dataRender();
        },
        detailReturn(){
            this.$emit('detailFn',this.isShow1,this.isShow2);
        },
        deviceStatus(){
            this.isShow3=true;
            this.isShow4=false;
           /*  this.selectA=false;
            this.selectB=true; */
        },
        deviceParams(){
            this.isShow4=true;
            this.isShow3=false;
            /* this.selectA=true;
            this.selectB=false; */
        },
        // 图表
        chart(data1){
            // 设备状态图
            let numStateDiagram=echarts.init(document.getElementById('stateDiagram'));
            numStateDiagram.setOption({
                title: {
                    text: '状态图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['状态']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['01/06', '05/06', '10/06', '15/06', '20/06', '25/06', '30/06']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    name: '状态',
                    type: 'line',
                    step: 'start',
                    // 引入动态数据
                    data: data1
                    }
                ]
            });
        },
        statusJudge(v){
                if(v=='正常'){
                    this.bc=this.bcNormal;
                }else if(v=='报警'){
                    this.bc=this.bcAlarm;
                }else if(v=='故障'){
                    this.bc=this.bcFault;
                }else if(v=='禁用'){
                    this.bc=this.bcDisable;
                }else if(v=='延时'){
                    this.bc=this.bcDelay;
                }else if(v=='离线'){
                    this.bc=this.bcOffline;
                }
            return this.bc;
        },
        render(){
            this.$axios({
                url:`/electricitySafeties/${this.fmId}`,
                method:'get'
            }).then((res)=>{
                console.log(res.data.data);
                if(res.data.msg=='success'){
                    this.detail={...res.data.data};
                }else {
                    this.$message.error("数据加载失败！");
                }
            })
        },
        dataRender(){
            this.$axios({
                url:`/dataRecord/${this.deviceNo}`,
                method:'get'
            }).then((res)=>{
                console.log(res.data.msg);
                if(res.data.msg=='success'){
                    let tableAll=res.data.data;
                    this.statusTable=tableAll.slice((this.page1-1)*this.count1,this.page1*this.count1);
                    this.total1=this.statusTable.length;
                    console.log(this.statusTable);
                    this.data1=[];
                    for (let key in this.statusTable) {
                        this.data1[key]=this.statusTable[key].details;
                    }
                    console.log(this.data1);
                }else {
                    this.$message.error("数据加载失败！");
                }
            });
        },
        // 查询
        timeReturn(v){
             let time=new Date(v).toLocaleString();
            console.log(time)
            return time;
        },
        timeReturn2(time){
            console.log(new Date(time).getTime());
            return new Date(time).getTime()
        },
        search1(){
            let startTime=this.timeReturn2(this.startTime1);
            let endTime=this.timeReturn2(this.endTime1);
            this.$axios({
                url:'/dataRecord',
                method:'get',
                params:{
                    deviceNo:this.deviceNo,
                    startTime,
                    endTime
                }
            }).then((res)=>{
                // 查看搜索框内容
                console.log(res.data.msg);
                if(res.data.msg=='success'){
                    let tableAll=res.data.data;
                    this.statusTable=tableAll.slice((this.page1-1)*this.count1,this.page1*this.count1);
                    this.total1=this.statusTable.length;
                    console.log(this.statusTable);
                    this.data1=[];
                    for (let key in this.statusTable) {
                        this.data1[key]=this.statusTable[key].details;
                    }
                }else {
                    this.$message.error("数据加载失败！");
                }
            })
        },
        // 添加
        addDisappear(){
            this.isShow6=false;
            this.isShow5=false;
            this.isShow7=false;
            this.clean();
        },
        addBox(){
            this.isShow5=true;
            this.isShow6=true;
        },
        addBox2(){
            this.isShow7=true;
            this.isShow6=true;
        },
        clean(){
            this.add1={
                "details": "",
                "deviceDate": "",
                "id": 0,
                "status": ""
            }
            this.add2={
                "deviceDate": "",
                "id": 0,
                "paramName": "",
                "paramValue": 0
            }
        },
        addSave(){
            this.$axios({
                url:'/dataRecord',
                method:'post',
                data:this.add1
            }).then((res)=>{
                // 查看搜索框内容
                console.log(res.data.msg);
                if(res.data.msg=='success'){
                    this.addDisappear();
                    this.fmRender();
                    this.$message.success('添加成功!');
                    }else {
                        this.$message.error("添加失败！");
                    }
            })
        },
        addSave2(){
            this.$axios({
                url:'/dataRecord',
                method:'post',
                data:this.add2
            }).then((res)=>{
                // 查看搜索框内容
                console.log(res.data.msg);
                if(res.data.msg=='success'){
                    this.addDisappear();
                    this.dataRender();
                    this.$message.success('添加成功!');
                    }else {
                        this.$message.error("添加失败！");
                    }
            })
        }
    }
  }
  </script>
  
  <style scoped lang="less">
// 详情页面
.detail{
    margin-top: -20px;
    background: #e9eef3;
    /* position: absolute;
    top: 0px;
    left: 0px;
    z-index: 4; */
}
// 详情头部
.detail-top{
    height: 125px;
    background: #fff;
    line-height: 30px;
    padding-left: 20px;
    padding-top: 10px;
    .dt-tip{
        height: 25px;
        line-height: 25px;
        font-size:14px;
        display: flex;
        margin-bottom: 20px;
    }
    .device-name{
        height: 40px;
        display: flex;
        p{
            font-weight: 700;
            margin-right:100px;
        }
        .btn{
            width: 80px;
            height: 30px;
            border: 1px solid #f2f2f2;
            border-radius: 3px;
            line-height: 30px;
            font-size: 12px;
            display: flex;
            justify-content: space-around;
            &:hover{
                cursor: pointer;
                color: #fff;
                background: #1890ff;
                .iconfont{
                color: #fff;
                    }
            }
            .iconfont{
                color: #1890ff;
                
            }
        }
    }
    .device-num{
        height: 40px;
        display: flex;
        .dn-tip{
            font-size: 12px;
            margin-right:100px;
            span{
                font-size: 14px;
            }
        }
        .dt-status{
            width: 80px;
            height: 30px;
            display: flex;
            font-size: 12px;
            justify-content: space-around;
            .statusColor{
                width: 10px;
                height: 10px;
                border-radius: 50%;
            }
        }
    }
    
}
// 详情主面板
.detail-banner{
    height: calc(100% - 100px);
    background: #fff;
    margin-top: 20px;
    padding-left: 20px;
    padding-top: 10px;
}
.basic-info{
    width: 1000px;
    height: 360px;
    border: 1px solid #d7d7d7;
    .el-header{
        height: 35px;
        line-height: 35px;
        background: #f2f2f2;
        font-size: 16px;
        font-weight: 700;
        display: flex;
        align-items: center;
    }
    .detail-info{
        height: 30px;
        padding-left: 10px;
        font-size: 13px;
        display: flex;
        justify-content: flex-start;
        margin-top: 20px;
        p{
            width:500px;
            display: flex;
            line-height: 30px;
            span{
                margin-left:10px ;
            }
        }
    }
    
}


// 告警记录部分

.alarm-list{
    height: 250px;
    line-height: 40px;
    margin-top: 30px;
}


.num-top{
    height: 32px;
    line-height: 32px;
    display: flex;
    /deep/.el-button{
        height: 30px;
        width: 100px;
        line-height: 0px;
        margin-left:0;
        border-radius: 0px;
    }
    p{
        font-size: 14px;
        margin-left: 100px;
    }
}

.num-search{
    height: 80px;
    display: flex;
    align-items: center;
    /deep/.el-date-editor{
        width: 200px;
        height: 30px;
        line-height: 30px;
        margin-right: 20px;
        .el-input__icon{
            line-height: 24px;
        }
        .el-range-separator{
            line-height: 23px;
        }
        .el-input--suffix{
            width: 200px;
            height: 30px;
        }
        .el-input__inner{
            width: 200px;
            height: 30px;
        }
    }
    .btnBox{
        display: flex;
        justify-content: space-between;
        width: 200px;
        margin-left: 100px;
    }
    .btn{
        width: 80px;
        height: 30px;
        color:#333;
        border: 1px solid #f2f2f2;
        border-radius: 3px;
        line-height: 30px;
        font-size: 12px;
        display: flex;
        justify-content: space-around;
        &:hover{
            cursor: pointer;
            color: #fff;
            background: #1890ff;
            .iconfont{
            color: #fff;
                }
        }
        .iconfont{
            color: #1890ff;
        }
    }
}

.state-diagram{
    display: flex;
    height: 400px;
    background: #fff;
    #stateDiagram{
        height: 400px;
        width: 800px;
    }
}
.state-tip{
    line-height: 40px;
    display: flex;
    font-weight: 700;
    font-size: 16px;
}
.state-list{
    height: 250px;
    line-height: 40px;
}
.list-bottom{
    line-height: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

// 设备参数
#paramsDiagram{
    height: 400px;
    width: 800px;
}


.dispositionBox{
    width: 460px;
    height: 450px;
    background: #fff;
    position:absolute;
    top: 0px;
    left: 300px;
    z-index: 4;
    .el-header{
        height: 30px;
        line-height: 30px;
        background: #f2f2f2;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .el-main{
        background: #fff;
        height: 420px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        line-height: 50px;
        padding: 0px 20px;
        margin-top: 10px;
        .inp{
            width: 300px;
            height: 90px;
            line-height: 35px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            font-size: 12px;
            .symbol{
                color: red;
            }
            .el-input{
                width: 300px;
                height: 30px;
                /deep/.el-input__inner{
                    width: 300px;
                    height: 30px;
                }
                /deep/.el-input__suffix{
                    margin-right: 10px;
                    color: #333;
                    font-size: 12px;
                }
            }
            .el-select{
                /deep/.el-input--suffix{
                    width: 300px;
                    height: 30px;
                }
                /deep/.el-input__inner{
                    width: 300px;
                    height: 30px;
                }
                /deep/.el-input__icon{
                    line-height: 30px;
                }
            }

        }
    }
}


.add-btn{
    width:100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn{
        width: 80px;
        height: 35px;
        border: 1px solid #f2f2f2;
        border-radius: 3px;
        line-height: 35px;
        font-size: 14px;
        display: flex;
        justify-content: space-around;
        margin-right: 20px;
        &:hover{
            cursor: pointer;
            color: #fff;
            background: #1890ff;
            .iconfont{
                color: #fff;
            }
        }
        .iconfont{
            color: #1890ff;
            
        }
    }
}
// 遮罩层
.mask{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, 0.5);
    filter: opacity(60%);
    opacity: 60%;
    z-index: 3;
}
  </style>